<template>
  <div class="product_body_">
    <div class="product_detail">
      <div class="product-page">
        <!-- 图片部分 -->
        <div class="image-section">
          <a href="#/index" class="back-button">&lt;</a>
          <img :src="productData.image" alt="Product Image" />
        </div>

        <div class="box1">
          <div class="box2">
            <div class="product_name">
              <span>{{ productData.name }}</span>
            </div>
            <div class="img_top">
              <img src="../../assets/share.jpg" alt="">
              <img v-if="!isFavourite" src="../../assets/unfavour.jpg" alt="" @click="addLearn">
              <img v-else src="../../assets/favour.jpg" alt="" @click="deleteLearn">
            </div>

            <div class="clear_float">
              <img src="../../assets/protect.jpg" alt="">
            </div>

            <div class="product_message">
              <span v-if="productData.crowd" class="message_">适用人群</span>
              <span v-if="productData.crowd">{{ productData.crowd }}</span><br><br>
              <span v-if="productData.cycle" class="message_">培训周期</span>
              <span v-if="productData.cycle">{{ productData.cycle }}天</span><br><br>
              <span v-if="productData.certificateBenefits" class="message_">持证优势</span>
              <span v-if="productData.certificateBenefits">"{{ productData.certificateBenefits }}"</span><br><br>
              <span v-if="productData.feature" class="message_yellow">产品特色</span>
              <span v-if="productData.feature" class="message_yellow_">"{{ productData.feature }}"</span><br><br>
              <span v-if="productData.tenantName" class="message_">培训机构</span>
              <span v-if="productData.tenantName">{{ productData.tenantName }}</span><br><br>
              <span v-if="productData.certificationOrg" class="message_">认证机构</span>
              <span v-if="productData.certificationOrg">{{ productData.certificationOrg }}</span><br><br>
              <span v-if="productData.certificateType" class="message_">证书说明</span>
              <span v-if="productData.certificateType">{{ productData.certificateType }}</span><br><br>
              <span v-if="productData.serviceGuarantee" class="message_">服务保障</span>
              <span v-if="productData.serviceGuarantee">{{ productData.serviceGuarantee }}</span><br><br>
            </div>
          </div>
        </div>
        <div class="product_footer">
          <div class="user_image">
            <img v-if="studentData.image" :src="studentData.image" alt="Image Description">
            <img v-else src="https://img47.photophoto.cn/20180426/0470063083396323_s.jpg" alt="">
          </div>
          <div class="orderButton">
            <span class="price_">￥{{ productData.price }}</span>
            <button @click="handleEnrollClick">立即报名</button>
          </div>
        </div>




      </div>
    </div>
  </div>
</template>

<script>
import { jwtDecode } from 'jwt-decode';
export default {

  data() {
    return {
      studentData: [],
      productData: [],
      learningData: [],
      isFavourite: false // 添加 isFavourite 变量来表示商品是否被收藏
    };
  },
  methods: {
    //添加想学
    addLearn() {
      const jwt = localStorage.getItem('jwt');
      if (jwt) {
        const productId = this.$route.params.id;
        const decoded = jwtDecode(jwt);
        const studentId = decoded.id; // 确保你的token结构中有id字段
        const IdData = {
          productId: productId,
          studentId: studentId
        };
        this.$http.post('/api/carts', IdData, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(response => {
          if (response.data.code === 1) {
            this.$message.success("已添加想学");
            this.isFavourite = true;
          } else {
            this.$message.error(response.data.message);
          }
        })
          .catch(error => {
            // 处理请求失败的逻辑
            this.$message.error("报名请求出错，请稍后重试");
          });
      } else {
        this.$message.error("请先登录");
      }

    },

    //删除想学
    deleteLearn() {
      const jwt = localStorage.getItem('jwt');
      const productId = this.$route.params.id;
      const decoded = jwtDecode(jwt);
      const studentId = decoded.id; // 确保你的token结构中有id字段
      const IdData = {
        studentId: studentId,
        productId: parseInt(productId)
      };
      this.$http.delete('/api/carts/deleteLearn', {
        params: IdData,
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(response => {
        if (response.data.code === 1) {
          this.$message.success("已取消想学");
          this.isFavourite = false;
        } else {
          this.$message.error(response.data.message);
        }
      })
        .catch(error => {
          // 处理请求失败的逻辑
          this.$message.error("报名请求出错，请稍后重试");
        });
  },

  handleEnrollClick() {
    const jwt = localStorage.getItem('jwt');
    if (jwt) {
      const productId = this.$route.params.id;
      const decoded = jwtDecode(jwt);
      const studentId = decoded.id; // 确保你的token结构中有id字段
      const IdData = {
        productId: productId,
        studentId: studentId
      };
      this.$http.post('/api/orders/addOrder', IdData, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(response => {
        if (response.data.code === 1) {
          this.$message.success("报名成功，请尽快完成缴费");
        } else {
          this.$message.error(response.data.message);
        }
      })
        .catch(error => {
          // 处理请求失败的逻辑
          this.$message.error("报名请求出错，请稍后重试");
        });
    } else {
      this.$message.error("请先登录");
    }
  },
},
mounted() {

  //获取学生数据
  const jwt = localStorage.getItem('jwt');
  if (jwt) {
    const decoded = jwtDecode(jwt);
    const userId = decoded.id; // 确保你的token结构中有id字段
    this.$http.get("/api/students/queryOneStudentById/" + userId).then(response => {  /*刷新页面*/
      this.studentData = response.data.data;
    }).catch(() => {
      this.$message.error("请求错误");
    });
  }
  //获取产品数据，并更新组件状态
  const id = this.$route.params.id;
  this.$http.get("/api/products/queryOneProductById/" + id).then(response => {  /*刷新页面*/
    this.productData = response.data.data;
  }).catch(() => {
    this.$message.error("请求错误");
  })

  //获取想学数据
  const productId = this.$route.params.id;
  const decoded = jwtDecode(jwt);
  const studentId = decoded.id; // 确保你的token结构中有id字段
  const IdData = {
    productId: productId,
    studentId: studentId
  };
  this.$http.get(`/api/carts/enroll?productId=${productId}&studentId=${studentId}`)
    .then(response => {
      if (response.data.code === 0) {
        this.isFavourite = true;
      }
    })
    .catch(error => {
      this.$message.error('报名请求出错，请稍后重试');
    });


},
};
</script>

<style>
@import "@/style/products.css";
</style>